<!-- 分类里面的数据集 -->
<template>
    <div>
        <div class="body">
            <el-table :data="jsonData" style="width: 100%">
                <el-table-column prop="id" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="len1" label="花萼长度" width="180">
                </el-table-column>
                <el-table-column prop="weight1" label="花萼宽度"> </el-table-column>
                <el-table-column prop="len2" label="花瓣长度"> </el-table-column>
                <el-table-column prop="weight2" label="花瓣宽度"> </el-table-column>
                <el-table-column prop="class" label="种类"> </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                layout="prev, pager, next"
                :total="totalNum"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import JsonViewer from "vue-json-viewer";
export default {
    name: "Exp1DataShow",
    data() {
        return {
            jsonData: [], //数据集
            curNum: 1,
            totalNum: 0,
            allData: [],
        };
    },
    components: {
        JsonViewer,
    },
    async created() {
        let { data } = await this.$http.get("/three/iris/dataset");

        this.totalNum = data.data.length;            //

        data = data.data.map((item,index) => {
            let classStr = data.describe[data.target[index]]
            return {
                id: index,
                len1: item[0],
                weight1: item[1],
                len2: item[2],
                weight2: item[3],
                class: classStr,
            };
        });
        this.allData = data;

        let leftIndex = (this.curNum - 1) * 10;
        let rightIndex = this.curNum * 10;

        let resData = [];
        for (let i = leftIndex; i < data.length && i < rightIndex; i++) {
            resData.push(data[i]);
        }
        this.jsonData = resData;
    },
    methods: {
        handleCurrentChange(val) {
            this.curNum = parseInt(val);
            let leftIndex = (this.curNum - 1) * 10;
            let rightIndex = this.curNum * 10;
            let resData = [];
            for (
                let i = leftIndex;
                i < this.allData.length && i < rightIndex;
                i++
            ) {
                resData.push(this.allData[i]);
            }
            this.jsonData = resData;
        },
    },
};
</script>

<style  scoped>
.pagination {
    text-align: right;
}
</style>
